<style lang="less" scoped>
  .topBox{
    padding: 132px 35px 57px;
    border-bottom: 1px solid #333E58;
    .userMsg{
      display: flex;
      align-items: center;
      font-size: 22px;
      color: #ccc;
      .head{
        width: 121px;
        height: 121px;
        border: 2px solid rgba(255, 255, 255, 0.4);
        border-radius: 50%;
        margin-right: 18px;
      }
      .msg{
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: space-around;
        .row1{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .edithead{
            font-size: 24px;
            display: flex;
            align-items: center;
            img{
              width: 17px;
              margin-left: 25px;
            }
          }
        }
        .row2{
          margin: 2px 0 9px
        }
        span{
          font-size: 24px;
          font-weight: normal;
          text-decoration: underline;
          color: #FFF;
          margin-left: 33px;
        }
        .row3{
          display: flex;
          align-items: center;
          color: #FFA22A;
          .moneyimg{
            width: 28px;
            margin-right: 10px;
          }
        }
      }
    }
    .paybox{
      margin: 52px 0;
      height: 69px;
      background: #222836;
      display: flex;
      align-items: center;
      padding: 0 38px 0 24px;
      input{
        flex: 1;
        font-size: 24px;
        color: #8791A8;
        outline: none;
        border: none;
        background: rgba(0, 0, 0, 0);
      }
      p{
        font-size: 22px;
        color: #FFFFFF;
      }
    }
    .qabox{
      display: flex;
      height: 144px;
      flex-direction: column;
      justify-content: space-between;
      color: #999999;
      font-size: 22px;
      a{
        text-decoration: underline;
        color: #3CA0E0
      }
    }
  }
  .navitem{
    font-size: 26px;
    color: #FFF;
    padding: 0 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #333E58;
    height: 97px;
    img{
      width: 17px;
    }
  }
  .logout{
    width: 607px;
    height: 82px;
    background: #FFA22A;
    font-size: 30px;
    color: #000;
    text-align: center;
    line-height: 82px;
    margin: 87px auto 20px;
  }
</style>

<template>
  <top-bar></top-bar>
  <div class="topBox">
    <div class="userMsg">
      <img class="head" :src="store.state.userMsg.photo" alt="">
      <div class="msg">
        <div class="row1">
          <p>{{store.state.userMsg.mobile}}</p>
          <p @click="router.push('/Updateavatar')" class="edithead">编辑头像<img src="../../assets/images/right.png" alt=""></p>
        </div>
        <div class="row2">ID:{{store.state.userMsg.uid}}
          <span @click="copy(store.state.userMsg.uid)">复制</span>
        </div>
        <div class="row3"><img class="moneyimg" src="../../assets/images/money.png" alt="">{{store.state.userMsg.money}}
          <span>充值</span>
        </div>
      </div>
    </div>
    <div class="paybox">
      <input v-model="store.state.userMsg.steamStorehouseLink" placeholder="注意！请输入您的交易网址" type="text">
      <p @click="copy(store.state.userMsg.steamStorehouseLink)">复制</p>
    </div>
    <div class="qabox">
      <div>打不开 Steam 怎么办？ <a class="link" href="https://www.bilibili.com/video/BV15D4y1X79w/" target="_blank">点击查看教程</a> </div>
      <div>获取您的 Steam 交易链接  <a class="link" href="https://steamcommunity.com/login/home" target="_blank">点击这里获取</a> </div>
      <div>取回前请将您的库存设置为“公开” <a class="link" href="https://steamcommunity.com/login/home" target="_blank">查看库存链接</a></div>
    </div>
  </div>
  <div class="navitem" v-for="(nav, index) in navList" @click="router.push(nav.path)" :key="index">
    <span>{{nav.name}}</span>
    <img src="../../assets/images/right.png" alt="">
  </div>
  <div class="logout" @click="logouting">退出登录</div>
</template>

<script>
import useClipboard from 'vue-clipboard3'
import { provide, reactive, ref } from "vue"
import { useStore } from "vuex"
import { logout } from '../../api/home.js'
import { useRouter } from "vue-router"
import { Toast } from "vant"
export default {
  setup(props) {
    provide('title', '个人')
    const store = useStore()
    const router  = useRouter()
    const { toClipboard } = useClipboard()
    const navList = reactive([
      {
        name: '推广',
        path: '/Share'
      },
      {
        name: '背包',
        path: '/Knapsack'
      },
      {
        name: '账户设置',
        path: '/Account'
      },
      {
        name: '账户记录',
        path: '/'
      },
      {
        name: '修改密码',
        path: '/resetpassword'
      },
    ])
    const logouting = () => {
      logout()
      router.replace('/')
      store.commit('resetStore')
    }
    const copy = async (text) => {
      try {
        await toClipboard(text)
        Toast.success('复制成功')
      } catch (e) {
        Toast.fail('不支持复制')
      }
    }
    return {
      router,
      store,
      navList,
      logouting,
      copy
    }
  }
}
</script>